<!--
 * @Author: jhw
 * @Date: 2025-08-13 13:37:55
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-13 13:50:36
 * @Description:
-->
<template>
  <div class="flex items-center justify-between">
    <!-- 标题以及当前状态 -->
    <div class="flex items-center">
      <div class="mr-20px">日期类型</div>
    </div>
    <!-- 按钮组 -->
    <div>
      <el-select @change="changeType" placeholder="日期类型" style="width: 120px" v-model="text">
        <el-option
          v-for="item in status"
          :key="item.value"
          :label="item.status"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UpdateStatus, ValueStatusArr, VueComType } from '@/types';
import { inject, ref } from 'vue';

const props = defineProps<{
  currentStatus: number;
  status: ValueStatusArr;
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();

const text = ref(props.status[props.currentStatus].value);
const typeArr = props.status.map((item) => item.value);
const updateStatus = inject<UpdateStatus>('updateStatus');

const changeType = (value: string) => {
  if (updateStatus) {
    const index = typeArr.indexOf(value);
    updateStatus(props.configKey, index);
  } else {
    console.error('updateStatus is not found');
  }
};
</script>

<style scoped></style>
